<template>
  <div class="login">
    <div class="title">
      <i class="iconfont icon-xiangzuo" @click="$router.go(-1), change()"></i>
      <div class="story">登录</div>
    </div>

    <div class="loginCon">
      <div class="form">
        <div class="item">
          <label>
            手机号
            <input type="text" placeholder="手机号码" v-model="phone" />
          </label>
        </div>
        <div class="item">
          <label
            >验证码
            <input
              class="ipt"
              type="text"
              placeholder="输入验证码"
              v-model="code"
            /> </label
          ><button class="getCode" @click="getCode">获取验证码</button>
        </div>
        <div class="item">
          <div class="submit" @click="submit">登录</div>
        </div>
        <div class="item">
          <div class="chooseLogin">
            <i
              class="iconfont icon-weixuanzhong"
              v-show="flag"
              @click="iconWXZ"
            ></i>
            <i
              class="xz iconfont icon-xuanzhong"
              v-show="!flag"
              @click="iconXZ"
            ></i>
            <p>
              您已阅读并同意<span>《橙子用户服务协议》</span>与<span
                >《橙子隐私权政策》</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="orderIcon">
        <div class="orderTi">第三方账号快速登录</div>
        <ul>
          <li @click="login">
            <i class="item1 iconfont icon-qq"></i>
          </li>
          <li @click="login">
            <i class="item2 iconfont icon-wechat"></i>
          </li>
          <li @click="login">
            <i class="item3 iconfont icon-weibo"></i>
          </li>
          <li @click="login">
            <i class="item4 iconfont icon-zhifubao"></i>
          </li>
          <li @click="login">
            <i class="item5 iconfont icon-taobao"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getCaptchaSent, getLoginCellphone } from "../../api/login";
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: null,
      code: null,
      flag: true,
    };
  },
  methods: {
    change() {
      this.$emit("getnavs-btn", true);
    },
    iconWXZ() {
      this.flag = false;
    },
    iconXZ() {
      this.flag = true;
    },
    getCode() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (!reg.test(this.phone)) {
        Toast("请输入正确手机号码");
        return;
      }
      // 请求接口验证码
      getCaptchaSent({ phone: this.phone }).then((data) => {
        if (data) {
          Toast("验证码发送成功");
        } else {
          Toast("验证码发送失败");
        }
      });
    },
    submit() {
      // let regCode = /^[0-9]{4}$/;
      // // 验证码
      // if(!regCode.test(this.code)){
      //     Toast("请输入正确验证码");
      //     return;
      // }
      // 1.验证手机号码
      let regPhone =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (!regPhone.test(this.phone)) {
        Toast("请填写正确信息");
        return;
      }
      // // 密码
      // let regPassword = /^[a-zA-Z]\w{5,17}$/;
      // if (!regPassword.test(this.password)) {
      //   Toast("请填写正确信息");
      //   return;
      // }
      // getCaptchaVerify({"phone":this.phone,"captcha":this.code}).then(data=>{
      //     if(data.data){
      //         // 验证手机密码
      if (!this.flag) {
        getLoginCellphone({
          phone: this.phone,
        }).then((data) => {
          console.log(data);
          if (data.phone == this.phone) {
            Toast("登陆成功");
            window.localStorage.setItem("uid", data.phone);
            //登陆成功跳回个人中心页面
            this.$router.push("/myself");
            this.$emit("get-uid", data.phone);
            this.$emit("getnavs-btn", true);
          } else {
            Toast("请填写正确信息");
            return;
          }
          // this.$emit("get-uid", info.account.id);
          // this.$emit("set-btn", 0);
        });
      } else {
        Toast("请勾选协议");
        return;
      }
    },
    login() {
      Toast("登陆成功");
      window.localStorage.setItem("uid", "18117786162");
      //登陆成功跳回个人中心页面
      this.$router.push("/myself");
      this.$emit("get-uid", "18117786162");
      this.$emit("getnavs-btn", true);
    },
  },
  created() {
    this.$emit("getnavs-btn", false);
  },
};
</script>

<style lang="less">
.login {
  width: 100%;
  background-color: #fff;
  .title {
    position: fixed;
    width: 100%;
    min-height: 50px;
    display: flex;
    background-color: #fff;
    z-index: 1;
    i {
      flex: 0 0 40px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
    }
    .story {
      flex: 1;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      padding-right: 40px;
    }
  }
  .loginCon {
    padding-top: 70px;
    .form {
      padding: 20px;
      background-color: #fff;
      .item {
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        margin-bottom: 15px;
        input {
          width: 80%;
          background-color: transparent;
          border: 0px;
          border-bottom: 1px solid #f6f7f9;
          outline: none;
          text-indent: 0.5em;
          font-size: 14px;
        }
        .ipt {
          width: 58%;
        }
        .getCode {
          border: 1px solid #fff;
          height: 30px;
          text-align: center;
          border-radius: 8px;
          font-size: 12px;
          color: #fff;
          padding: 0 10px;
          background-color: rgb(35, 179, 130);
        }
        .submit {
          margin-top: 50px;
          padding: 8px 0;
          font-size: 18px;
          background-color: rgb(35, 179, 130);
          text-align: center;
          color: #d4473c;
          border-radius: 6px;
          color: #fff;
        }
        .chooseLogin {
          padding-top: 20px;
          display: flex;
          i {
            margin-right: 4px;
            padding-top: 1px;
          }
          .xz {
            color: rgb(35, 179, 130);
          }
          p {
            color: #999;
            font-size: 14px;
            span {
              color: rgb(35, 179, 130);
            }
          }
        }
      }
    }
    .orderIcon {
      padding: 15px;
      margin-top: 80px;
      .orderTi {
        text-align: center;
        padding: 20px;
        font-size: 14px;
      }
      ul {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        li {
          i {
            font-size: 36px;
          }
          .item1,
          .item4 {
            color: #3684ff;
          }
          .item2 {
            color: #31da31;
          }
          .item3 {
            color: red;
          }
          .item5 {
            color: #ff7200;
            font-size: 42px;
          }
        }
      }
    }
  }
}
</style>